<template>
  <base-module
    class="milestone-node-comp"
    :title="title"
    v-bind="$attrs"
    v-on="$listeners"
  >
    <div class="progress-container" :style="{
      'justify-content': data.length > 7 ? 'space-between' : 'center',
    }">
      <ul
        :style="{ width: stepWidth }"
      >
        <li
          v-for="(item, index) in options"
          :class="[
            'progress-item',
            item.hasOverdue ? 'overdue' : '',
            item.preStatus ? '' : 'pre-overdue',
            item.nextStatus ? '' : 'next-overdue',
          ]"
          :key="index"
          @click="handleClick(item)">
          <div class="title" :title="item.title">{{ item.title }}</div>
          <div class="icon-container">
            <div class="img-content">
              <img src="../../../assets/images/overview/progress_icon.webp" alt="">
            </div>
          </div>
          <div class="progress-time">
            <div class="plan">
              <span class="label">计划</span>
              <span class="time">{{ item.planTime }}</span>
            </div>
            <!--            <div v-if="item.actualTime" class="actual">-->
            <!--              <span class="label">实际</span>-->
            <!--              <span class="time">{{ item.actualTime }}</span>-->
            <!--            </div>-->
          </div>
        </li>
      </ul>
      <el-dialog
      class="milestone-node-dialog"
      title="附件信息"
      :destroy-on-close="true"
      append-to-body
      :visible="visible"
      :width="$setRem(800)"
      :before-close="handleCancel">
        <el-row>
          <el-col :span="3">节点名称：</el-col>
          <el-col :span="15">{{ currentData.milepostName }}</el-col>
        </el-row>
        <el-row>
          <el-col :span="3">备注：</el-col>
          <el-col :span="15">{{ currentData.remark }}</el-col>
        </el-row>
        <div class="file-content">
          <template v-if="files.fileUrl">
            <el-image
              v-if="files.hasImg"
              class="img"
              :src="files.url"
              :preview-src-list="[files.url]">
            </el-image>
            <span
              v-else
              class="file-name"
              :title="files.name"
              @click="handleUpload">
              {{ files.name }}
            </span>
          </template>
          <span class="empty" v-else>暂无附件信息</span>
        </div>
    </el-dialog>
    </div>
  </base-module>
</template>

<script>
import BaseModule from '@/components/public/BaseModule';

export default {
  name: 'milestoneNodeComp',
  props: {
    title: {
      type: String,
      default: ''
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      visible: false,
      currentData: {},
      progressData: []
    };
  },
  computed: {
    stepWidth() {
      const len = this.progressData.length;
      return len ? this.$setRem(len * 270) : '100%';
    },
    projectId() {
      return this.$store.state.currentProjectId;
    },
    options() {
      const todayStr = this.$moment().format('YYYY-MM-DD');
      const len = this.progressData.length - 1;
      return this.progressData.map((item, i) => {
        // early 开始逾期预警（状态:天数）
        // 状态1:未开始；2：倒计时；3:提前完成；4：正常完成：5：逾期开始；6：逾期完成
        const { milepostName, planTime, early, finishFlag } = item;
        const [hasOverdue] = early.split(':');
        // 下一个节点是否逾期
        let nextStatus = false;
        let preStatus = false;
        const preItem = i > 0 ? this.progressData[i -1] : null;
        const nextItem = i < len ? this.progressData[i + 1] : null;
        if (preItem) {
          const [preHasOverdue] = preItem.early.split(':');
          preStatus = preHasOverdue > 4;
        }
        if (nextItem) {
          const [nextHasOverdue] = nextItem.early.split(':');
          nextStatus = nextHasOverdue > 4;
        }
        return {
          ...item,
          nextStatus,
          preStatus,
          hasOverdue: hasOverdue > 4,
          title: milepostName,
          isToday: todayStr === planTime,
        };
      });
    },
    // 附件
    files() {
      const fileUrl = this.currentData.fileUrl;
      const fileNames = fileUrl ? fileUrl.match(/([^\/])+\.\w+$/) : '';
      const fileName = Array.isArray(fileNames) ? fileNames[0] : '';
      return {
        fileUrl,
        name: fileName,
        url: this.$checkUrl(fileUrl),
        hasImg: /\.jpg|\.jpeg|\.png$/.test(fileUrl)
      };
    },
  },
  created() {
    this.getData();
  },
  components: {
    BaseModule
  },
  methods: {
    async getData() {
      const params = {
        pageFlag: false,
        projectId: this.projectId
      };
      const { success, data: {
        data
      }} = await this.$Model.getMilepostList(params);
      if (success && data) {
        this.progressData = data.list || [];
      }
    },
    handleCancel() {
      this.visible = false;
    },
    handleClick(item) {
      this.currentData = { ...item };
      this.visible = true;
    },
    // 下载文件
    handleUpload() {
      this.files.url && window.open(this.files.url);
    },
  }
};
</script>

<style lang="scss" scoped>
  @import "../../../assets/styles/dialog";

  .milestone-node-comp {
    /deep/ .base-module-title {
      opacity: 0;
      visibility: hidden;
    }
    .progress-container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      overflow: auto;
      ul {
        height: 100%;
        overflow: hidden;
      }
      .progress-item {
        float: left;
        display: flex;
        width: 270px;
        height: 100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        font-size: 12px;
        position: relative;
        cursor: pointer;
        &.overdue {
          .title {
            background: rgba(233, 7, 82, .4);
            border: 1px solid #e90752;
          }
          .icon-container {
            &::before, &::after {
              border: 1px solid #e90752;
              background: #e90752;
            }
            .img-content {
              background: #e90752;
              &::after {
                background: rgba(233, 7, 82, .4);
              }
            }
          }
          .progress-time {
            > div {
              box-shadow: 0 0 4px 0 rgba(233, 7, 82, .8);
              background: rgba(233, 7, 82, .4);
              border: 2px solid #e90752;
              &::after {
                border: 2px solid rgba(233, 7, 82, .8);
              }
            }
          }
          &.pre-overdue {
            .icon-container {
              &::before {
                border: none;
                border-image: linear-gradient(to right, #167fff, #e90752) 1 1;
                background: linear-gradient(to right, #167fff, #e90752);
              }
            }
          }
          &.next-overdue {
            .icon-container {
              &::after {
                border: none;
                border-image: linear-gradient(to right, #e90752, #167fff) 1 1;
                background: linear-gradient(to right, #e90752, #167fff);
              }
            }
          }
        }
        .title {
          max-width: 200px;
          min-width: 80px;
          padding: 0 20px;
          height: 32px;
          background: rgba(17,118,242, .4);
          border: 1px solid #167fff;
          border-radius: 19px;
          text-align: center;
          line-height: 32px;
          font-size: 16px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .icon-container {
          position: relative;
          width: 100%;
          height: 60px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 10px 0;
          &::before {
            display: block;
            content: '';
            position: absolute;
            z-index: 10;
            height: 6px;
            top: calc(50% - 3px);
            left: -2px;
            width: calc(50% - 16px);
            border-radius: 4px;
            background: #1176f2;
          }
          &::after {
            display: block;
            content: '';
            position: absolute;
            z-index: 10;
            height: 6px;
            top: calc(50% - 3px);
            right: -2px;
            width: calc(50% - 16px);
            border-radius: 4px;
            background: #1176f2;
          }
          .img-content {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: #1176f2;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            &::after {
              display: block;
              position: absolute;
              content: '';
              width: 60px;
              height: 60px;
              background: rgba(17, 118, 242, .4);
              border-radius: 50%;
            }
          }
          img {
            width: 22px;
            height: 22px;
          }
        }
        .progress-time {
          width: 200px;
          /*height: 83px;*/
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          font-size: 16px;
          color: #fff;
          > div {
            width: 189px;
            height: 34px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border: 2px solid #1176f2;
            border-radius: 16px;
            box-shadow: 0 0 4px 0 rgba(17,117,241,0.80);
            background: rgba(17, 118, 242, .4);
            position: relative;
            .label {
              width: 65px;
              height: 34px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            .time {
              width: calc(100% - 65px);
              text-align: center;
              display: inline-block;
            }
            &::after {
              width: 65px;
              height: 32px;
              content: '';
              display: inline-block;
              position: absolute;
              top: -3px;
              left: -2px;
              border: 2px solid rgba(17, 118, 242, 0.8);
              border-radius: 20px;
              background: transparent;
              /*background: rgba(45, 208, 148, 0.4);*/
              /*border: 0.02rem solid rgba(45, 208, 148, 0.8);*/
            }
          }
        }
      }
    }
  }

  .milestone-node-dialog {
    .el-row {
      margin: 10px 0;
      .el-col-3 {
        color: $mainColor;
      }
    }
    .file-content {
      margin-top: 30px;
      min-height: 150px;
      .empty {
        width: 100%;
        min-height: 150px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: $disabledBg;
      }
      .el-image {
        width: 100%;
        height: 100%;
        .img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
</style>
